<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block String Element</title>
    <link rel="stylesheet" href="blok_string_el.css">
</head>
<body>
    <!-- - - - - - - - - - - - -->
    <!-- ВНИМАНИЕ!!! Строчные тэги можно размещать в любой тег
    а блочные только в блочные -->
    <!-- - - - - - - - - - - - -->

    
    
    <!-- ЭТО СТРОЧНЫЕ ЭЛЕМЕНТЫ -->
    <!-- Делаем из строчного элемента блочный 
    display: block; -->

    <!-- <span class="box">
        Content 1
    </span>
    <span class="box">
        Content 2
    </span>
    <span class="box">
        Content 3
    </span>
    <span class="box">
        Content 4
    </span>
    <span class="box">
        Content 1
    </span>
    <span class="box">
        Content 2
    </span>
    <span class="box">
        Content 3
    </span>
    <span class="box">
        Content 4
    </span>
    <span class="box">
        Content 1
    </span>
    <span class="box">
        Content 2
    </span>
    <span class="box">
        Content 3
    </span>
    <span class="box">
        Content 4
    </span>
    <span class="box">
        Content 1
    </span>
    <span class="box">
        Content 2
    </span>
    <span class="box">
        Content 3
    </span>
    <span class="box">
        Content 4
    </span>
    <span class="box">
        Content 1
    </span>
    <span class="box">
        Content 2
    </span>
    <span class="box">
        Content 3
    </span>
    <span class="box">
        Content 4
    </span> -->



    <!-- А ЕСЛИ ЭТО БЛОКИ -->
    <!-- для этого используем св-во CSS display: inline; -->
    <!-- <div class="box">
        Content 1
    </div>
    <div class="box">
        Content 2
    </div>
    <div class="box">
        Content 3
    </div>
    <div class="box">
        Content 4
    </div> -->



    <!-- А ЕСЛИ НУЖНО СОВМЕСТИТЬ +/-? -->
    <!-- для этого используем св-во CSS display: inline-block; -->
    <div class="box">
        Content 1
    </div>
    <div class="box">
        Content 2
    </div>
    <div class="box">
        Content 3
    </div>
    <div class="box">
        Content 4
    </div>
    <div class="box">
        Content 1
    </div>
    <div class="box">
        Content 2
    </div>
    <div class="box">
        Content 3
    </div>
    <div class="box">
        Content 4
    </div>
    <div class="box">
        Content 1
    </div>
    <div class="box">
        Content 2
    </div>
    <div class="box">
        Content 3
    </div>
    <div class="box">
        Content 4
    </div>
    <div class="box">
        Content 1
    </div>
    <div class="box">
        Content 2
    </div>
    <div class="box">
        Content 3
    </div>
    <div class="box">
        Content 4
    </div>
    <div class="box">
        Content 1
    </div>
    <div class="box">
        Content 2
    </div>
    <div class="box">
        Content 3
    </div>
    <div class="box">
        Content 4
    </div> 
</body>
</html>